import React, { Component } from 'react'
import { Icon } from  'antd-mobile'
import { FormattedMessage } from 'react-intl'
import { HistoryDetail } from './'

export default class HistoryList extends Component {
	state = {
		visible: false
	}
	render() {
		const { visible } = this.state
		return (
			<div>
				<h3 className="rt-h3-title">
					<FormattedMessage id="recentday"/>
				</h3>
				<ul className="rt-history-list">
					<li className="-item -title">
						<span className="-first">平仓日期</span>
						<span className="-second">商品</span>
						<span className="-third">数量</span>
						<span>方向</span>
						<span>盈亏</span>
						<span></span>
					</li>
					<li className="-item">
						<span className="-first">4月11日</span>
						<span className="-second">欧元/美元</span>
						<span className="-third">10000000</span>
						<span className="-four">
							<em className="-bgCls">买</em>
						</span>
						<span>-24</span>
						<span
							className="-last"
							onClick={
								() => {
									this.setState({
										visible: true
									})
								}
							}
						>
							<span className="-operation">
								<Icon type="right"/>
							</span>
						</span>
					</li>
				</ul>
				<HistoryDetail
					visible={visible}
					onClose={
						() => {
							this.setState({
								visible: false
							})
						}
					}
				/>
			</div>
			)
	}
}